<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Build Tool Plugin | Alins Docs(v0.0.36)</title>
    <meta name="description" content="The most elegant and concise WebUI framework">
    <link rel="preload stylesheet" href="/docs/assets/style.c48c49c1.css" as="style">
    
    <script type="module" src="/docs/assets/app.dd4300fb.js"></script>
    <link rel="preload" href="/docs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/docs/assets/chunks/framework.cd7b584e.js">
    <link rel="modulepreload" href="/docs/assets/chunks/theme.d53b9107.js">
    <link rel="modulepreload" href="/docs/assets/ecosystem_plugin.md.55fd1634.lean.js">
    <link rel="icon" type="image/svg+xml" href="https://shiyix.cn/images/alins.ico">
    <meta property="og:type" content="website">
    <meta property="og:description" content="The most elegant and concise WebUI framework">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@alins_js">
    <meta name="theme-color" content="#646cff">
    <script src="https://unpkg.com/alins-compiler-web@0.0.36"></script>
    <link rel="stylesheet" href="https://unpkg.com/easy-icon@1.1.0/offline/css/easy-icon.css">
    <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-393432cc><!--[--><!--]--><!--[--><span tabindex="-1" data-v-04c73376></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-04c73376> Skip to content </a><!--]--><!----><header class="VPNav" data-v-393432cc data-v-ec9f029e><div class="VPNavBar has-sidebar" data-v-ec9f029e data-v-b18f8b5a><div class="container" data-v-b18f8b5a><div class="title" data-v-b18f8b5a><div class="VPNavBarTitle has-sidebar" data-v-b18f8b5a data-v-0334c2ba><a class="title" href="/docs/" data-v-0334c2ba><!--[--><!--]--><!--[--><img class="VPImage logo" src="https://shiyix.cn/images/alins.png" alt data-v-ca2c9fde><!--]--><!--[-->Alins<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-b18f8b5a><div class="curtain" data-v-b18f8b5a></div><div class="content-body" data-v-b18f8b5a><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-b18f8b5a><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-b18f8b5a data-v-a9157ccb><span id="main-nav-aria-label" class="visually-hidden" data-v-a9157ccb>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docs/" tabindex="0" data-v-a9157ccb data-v-a854cf20><!--[--><span data-v-a854cf20>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docs/guide/intro.html" tabindex="0" data-v-a9157ccb data-v-a854cf20><!--[--><span data-v-a854cf20>Guide</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/docs/ecosystem/plugin.html" tabindex="0" data-v-a9157ccb data-v-a854cf20><!--[--><span data-v-a854cf20>Ecosystem</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://alinsjs.github.io/playground" target="_blank" rel="noreferrer" tabindex="0" data-v-a9157ccb data-v-a854cf20><!--[--><span data-v-a854cf20>Playground</span><!--]--></a><!--]--><!--]--></nav><div class="VPFlyout VPNavBarTranslations translations" data-v-b18f8b5a data-v-6668efd3 data-v-785f0b9f><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="Change language" data-v-785f0b9f><span class="text" data-v-785f0b9f><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="option-icon" data-v-785f0b9f><path d="M0 0h24v24H0z" fill="none"></path><path d=" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z " class="css-c4d79v"></path></svg><!----><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-785f0b9f><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-785f0b9f><div class="VPMenu" data-v-785f0b9f data-v-4c920043><!----><!--[--><!--[--><div class="items" data-v-6668efd3><p class="title" data-v-6668efd3>English</p><!--[--><div class="VPMenuLink" data-v-6668efd3 data-v-b64d09f3><a class="VPLink link vp-external-link-icon" href="https://alinsjs.github.io/docs-cn/ecosystem/plugin.html" target="_blank" rel="noreferrer" data-v-b64d09f3><!--[-->简体中文<!--]--></a></div><!--]--></div><!--]--><!--]--></div></div></div><div class="VPNavBarAppearance appearance" data-v-b18f8b5a data-v-422259e7><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-422259e7 data-v-a1f2fb13 data-v-d63d548b><span class="check" data-v-d63d548b><span class="icon" data-v-d63d548b><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-a1f2fb13><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-a1f2fb13><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-b18f8b5a data-v-6af4e87c data-v-0f7f8cdf><!--[--><a class="VPSocialLink no-icon" href="https://github.com/alinsjs/alins" aria-label="github" target="_blank" rel="noopener" data-v-0f7f8cdf data-v-832aa7f3><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-b18f8b5a data-v-56a4bcd3 data-v-785f0b9f><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-785f0b9f><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-785f0b9f><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-785f0b9f><div class="VPMenu" data-v-785f0b9f data-v-4c920043><!----><!--[--><!--[--><div class="group translations" data-v-56a4bcd3><p class="trans-title" data-v-56a4bcd3>English</p><!--[--><div class="VPMenuLink" data-v-56a4bcd3 data-v-b64d09f3><a class="VPLink link vp-external-link-icon" href="https://alinsjs.github.io/docs-cn/ecosystem/plugin.html" target="_blank" rel="noreferrer" data-v-b64d09f3><!--[-->简体中文<!--]--></a></div><!--]--></div><div class="group" data-v-56a4bcd3><div class="item appearance" data-v-56a4bcd3><p class="label" data-v-56a4bcd3>Appearance</p><div class="appearance-action" data-v-56a4bcd3><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-56a4bcd3 data-v-a1f2fb13 data-v-d63d548b><span class="check" data-v-d63d548b><span class="icon" data-v-d63d548b><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-a1f2fb13><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-a1f2fb13><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-56a4bcd3><div class="item social-links" data-v-56a4bcd3><div class="VPSocialLinks social-links-list" data-v-56a4bcd3 data-v-0f7f8cdf><!--[--><a class="VPSocialLink no-icon" href="https://github.com/alinsjs/alins" aria-label="github" target="_blank" rel="noopener" data-v-0f7f8cdf data-v-832aa7f3><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-b18f8b5a data-v-7c446225><span class="container" data-v-7c446225><span class="top" data-v-7c446225></span><span class="middle" data-v-7c446225></span><span class="bottom" data-v-7c446225></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-393432cc data-v-d7c3857d><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-d7c3857d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-d7c3857d><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-d7c3857d>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-d7c3857d data-v-f9126f59><button data-v-f9126f59>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-393432cc data-v-10486b0e><div class="curtain" data-v-10486b0e></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-10486b0e><span class="visually-hidden" id="sidebar-aria-label" data-v-10486b0e> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-10486b0e><section class="VPSidebarItem level-0 has-active" data-v-10486b0e data-v-76bb5602><div class="item" role="button" tabindex="0" data-v-76bb5602><div class="indicator" data-v-76bb5602></div><h2 class="text" data-v-76bb5602>Ecosystem</h2><!----></div><div class="items" data-v-76bb5602><!--[--><div class="VPSidebarItem level-1 is-link" data-v-76bb5602 data-v-76bb5602><div class="item" data-v-76bb5602><div class="indicator" data-v-76bb5602></div><a class="VPLink link link" href="/docs/ecosystem/plugin.html" data-v-76bb5602><!--[--><p class="text" data-v-76bb5602>Plugins</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-76bb5602 data-v-76bb5602><div class="item" data-v-76bb5602><div class="indicator" data-v-76bb5602></div><a class="VPLink link link" href="/docs/ecosystem/web-compiler.html" data-v-76bb5602><!--[--><p class="text" data-v-76bb5602>Web Compiler</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-76bb5602 data-v-76bb5602><div class="item" data-v-76bb5602><div class="indicator" data-v-76bb5602></div><a class="VPLink link link" href="/docs/ecosystem/standalone.html" data-v-76bb5602><!--[--><p class="text" data-v-76bb5602>Alins Standalone</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-76bb5602 data-v-76bb5602><div class="item" data-v-76bb5602><div class="indicator" data-v-76bb5602></div><a class="VPLink link link" href="/docs/ecosystem/reactive.html" data-v-76bb5602><!--[--><p class="text" data-v-76bb5602>Alins Reactive</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-76bb5602 data-v-76bb5602><div class="item" data-v-76bb5602><div class="indicator" data-v-76bb5602></div><a class="VPLink link link" href="/docs/ecosystem/lib.html" data-v-76bb5602><!--[--><p class="text" data-v-76bb5602>Libs</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-393432cc data-v-e3b44dad><div class="VPDoc has-sidebar has-aside" data-v-e3b44dad data-v-b9359269><!--[--><!--]--><div class="container" data-v-b9359269><div class="aside" data-v-b9359269><div class="aside-curtain" data-v-b9359269></div><div class="aside-container" data-v-b9359269><div class="aside-content" data-v-b9359269><div class="VPDocAside" data-v-b9359269 data-v-8bcadf66><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-8bcadf66 data-v-19553680><div class="content" data-v-19553680><div class="outline-marker" data-v-19553680></div><div class="outline-title" data-v-19553680>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-19553680><span class="visually-hidden" id="doc-outline-aria-label" data-v-19553680> Table of Contents for current page </span><ul class="root" data-v-19553680 data-v-6513012c><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-8bcadf66></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-b9359269><div class="content-container" data-v-b9359269><!--[--><!--]--><!----><main class="main" data-v-b9359269><div style="position:relative;" class="vp-doc _docs_ecosystem_plugin" data-v-b9359269><div><h1 id="build-tool-plugin" tabindex="-1">Build Tool Plugin <a class="header-anchor" href="#build-tool-plugin" aria-label="Permalink to &quot;Build Tool Plugin&quot;">​</a></h1><p>When using the build tool plugin, Alins will compile files named with <code>jsx</code> and <code>tsx</code> suffixes by default. Alins currently supports the following mainstream build tools</p><p>The following tool names are all npm package names, and the installation methods are as follows:</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">npm i &lt;package_name&gt;</span></span></code></pre></div><h2 id="_1-vite-plugin-alins" tabindex="-1">1. <a href="https://www.npmjs.com/package/vite-plugin-alins" target="_blank" rel="noreferrer">vite-plugin-alins</a> <a class="header-anchor" href="#_1-vite-plugin-alins" aria-label="Permalink to &quot;1. [vite-plugin-alins](https://www.npmjs.com/package/vite-plugin-alins)&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// vite.config.js</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">defineConfig</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vite</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> alins </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vite-plugin-alins</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">defineConfig</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">   </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#82AAFF;">alins</span><span style="color:#A6ACCD;">()]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre></div><h2 id="_2-rollup-plugin-alins" tabindex="-1">2. <a href="https://www.npmjs.com/package/rollup-plugin-alins" target="_blank" rel="noreferrer">rollup-plugin-alins</a> <a class="header-anchor" href="#_2-rollup-plugin-alins" aria-label="Permalink to &quot;2. [rollup-plugin-alins](https://www.npmjs.com/package/rollup-plugin-alins)&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// rollup.config.js</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> alins </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">rollup-plugin-alins</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">   </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">     </span><span style="color:#82AAFF;">alins</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"><span style="color:#A6ACCD;">   ]</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="_3-esbuild-plugin-alins" tabindex="-1">3. <a href="https://www.npmjs.com/package/esbuild-plugin-alins" target="_blank" rel="noreferrer">esbuild-plugin-alins</a> <a class="header-anchor" href="#_3-esbuild-plugin-alins" aria-label="Permalink to &quot;3. [esbuild-plugin-alins](https://www.npmjs.com/package/esbuild-plugin-alins)&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">build</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">esbuild</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> alins </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">esbuild-plugin-alins</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#82AAFF;">build</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">   </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#82AAFF;">alins</span><span style="color:#A6ACCD;">()]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="_4-alins-loader" tabindex="-1">4. <a href="https://www.npmjs.com/package/alins-loader" target="_blank" rel="noreferrer">alins-loader</a> <a class="header-anchor" href="#_4-alins-loader" aria-label="Permalink to &quot;4. [alins-loader](https://www.npmjs.com/package/alins-loader)&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">     </span><span style="color:#F07178;">module</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">         </span><span style="color:#F07178;">rules</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">             </span><span style="color:#F07178;">test</span><span style="color:#89DDFF;">:</span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">\.</span><span style="color:#89DDFF;">[</span><span style="color:#C3E88D;">jt</span><span style="color:#89DDFF;">]</span><span style="color:#C3E88D;">sx</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">             </span><span style="color:#F07178;">use</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">                 </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;">loader</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">alins-loader</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">             ]</span></span>
<span class="line"><span style="color:#A6ACCD;">         </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#A6ACCD;">     </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="you-can-also-customize-your-own-development-tools-based-on-the-following-tools" tabindex="-1">You can also customize your own development tools based on the following tools <a class="header-anchor" href="#you-can-also-customize-your-own-development-tools-based-on-the-following-tools" aria-label="Permalink to &quot;You can also customize your own development tools based on the following tools&quot;">​</a></h3><h2 id="_5-alins-compiler-node" tabindex="-1">5. <a href="https://www.npmjs.com/package/alins-compiler-node" target="_blank" rel="noreferrer">alins-compiler-node</a> <a class="header-anchor" href="#_5-alins-compiler-node" aria-label="Permalink to &quot;5. [alins-compiler-node](https://www.npmjs.com/package/alins-compiler-node)&quot;">​</a></h2><p>alins-compiler-node is the alins compiler in the nodejs environment. All the above plug-ins encapsulate the compilation functions implemented by this tool. They are used as follows:</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">parseAlins</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">alins-compiler-node</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> code </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">let a=1; a++;</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> result </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">parseAlins</span><span style="color:#A6ACCD;">(code)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>The parseAlins method is an optional configuration item with three optional attributes:</p><ol><li>ts: Whether to support typescript compilation, the default is false</li><li>importType: the way to introduce alins, optional values ​​are esm, cjs, iife. The default value is esm, which means using the import statement to introduce alins</li><li>filename: current code module file name, automatically generated by default</li></ol><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">parseAlins</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">alins-compiler-node</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> code </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">let a=1; a++;</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> result </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">parseAlins</span><span style="color:#A6ACCD;">(code</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">     </span><span style="color:#F07178;">ts</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">     </span><span style="color:#F07178;">importType</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">esm</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">     </span><span style="color:#F07178;">filename</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">test.tsx</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="_6-alins-compiler-core" tabindex="-1">6. <a href="https://www.npmjs.com/package/alins-compiler-core" target="_blank" rel="noreferrer">alins-compiler-core</a> <a class="header-anchor" href="#_6-alins-compiler-core" aria-label="Permalink to &quot;6. [alins-compiler-core](https://www.npmjs.com/package/alins-compiler-core)&quot;">​</a></h2><p>Compiler core module, basically developers do not need to use this module.</p><p>This module can generate a universal babel plug-in that supports use in web and nodejs environments. The alins-compiler-node above and the web compiler in subsequent chapters all rely on this module.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">createBabelPluginAlins</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">alins-compiler-core</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> babelPlugin </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createBabelPluginAlins</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="_7-babel-preset-alins" tabindex="-1">7. <a href="https://www.npmjs.com/package/babel-preset-alins" target="_blank" rel="noreferrer">babel-preset-alins</a> <a class="header-anchor" href="#_7-babel-preset-alins" aria-label="Permalink to &quot;7. [babel-preset-alins](https://www.npmjs.com/package/babel-preset-alins)&quot;">​</a></h2><p>Alins babel default comes with jsx and typescript translation functions. After installation, use it in babel.config.json or babel.config.js:</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">   </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">presets</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: [ </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">alins</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;"> ]</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>Supports importType, ts, and jsx parameters. The importType and ts parameters have the same meaning as in 5; the jsx parameter indicates whether to enable jsx translation, and the default is true.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">   </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">presets</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: [</span></span>
<span class="line"><span style="color:#F07178;">     [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">alins</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">       </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">importType</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">esm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">       </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">ts</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">       </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">jsx</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span></span>
<span class="line"><span style="color:#F07178;">     </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">]</span></span>
<span class="line"><span style="color:#F07178;">   ]</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="_8-babel-plugin-alins" tabindex="-1">8. <a href="https://www.npmjs.com/package/babel-plugin-alins" target="_blank" rel="noreferrer">babel-plugin-alins</a> <a class="header-anchor" href="#_8-babel-plugin-alins" aria-label="Permalink to &quot;8. [babel-plugin-alins](https://www.npmjs.com/package/babel-plugin-alins)&quot;">​</a></h2><p>Alins babel plug-in does not include jsx and typescript translation functions. You need to install the corresponding plug-in yourself. It is recommended to use <a href="https://www.npmjs.com/package/babel-preset-alins" target="_blank" rel="noreferrer">babel-preset-alins</a> directly.</p><p>After installation, use in babel.config.json or babel.config.js:</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">   </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">plugins</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: [ </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">alins</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;"> ]</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>Supports carrying importType parameter, which has the same meaning as in 5. The default value is esm</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">   </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">plugins</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: [</span></span>
<span class="line"><span style="color:#F07178;">     [</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">alins</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">       </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">importType</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">esm</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#F07178;">     </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">]</span></span>
<span class="line"><span style="color:#F07178;">   ]</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="_9-eslint-config-alins" tabindex="-1">9. <a href="https://www.npmjs.com/package/eslint-config-alins" target="_blank" rel="noreferrer">eslint-config-alins</a> <a class="header-anchor" href="#_9-eslint-config-alins" aria-label="Permalink to &quot;9. [eslint-config-alins](https://www.npmjs.com/package/eslint-config-alins)&quot;">​</a></h2><p>Alins eslint config module, after installation, configure it in the .eslintrc file:</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">   </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">extends</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">alins</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-b9359269 data-v-10d6a17f><!--[--><!--]--><!----><nav class="prev-next" data-v-10d6a17f><div class="pager" data-v-10d6a17f><!----></div><div class="pager" data-v-10d6a17f><a class="pager-link next" href="/docs/ecosystem/web-compiler.html" data-v-10d6a17f><span class="desc" data-v-10d6a17f>Next page</span><span class="title" data-v-10d6a17f>Web Compiler</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-393432cc data-v-f9e5792f><div class="container" data-v-f9e5792f><p class="message" data-v-f9e5792f>Alins 2022-present</p><p class="copyright" data-v-f9e5792f>@github/alinsjs</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"ecosystem_lib.md\":\"17811540\",\"guide_api.md\":\"b425ee2e\",\"ecosystem_plugin.md\":\"55fd1634\",\"ecosystem_reactive.md\":\"6adf6423\",\"guide_binding.md\":\"a8c1f267\",\"ecosystem_web-compiler.md\":\"16a5613a\",\"ecosystem_standalone.md\":\"700dbdb0\",\"guide_compare.md\":\"03a0577a\",\"guide_class.md\":\"91770b68\",\"guide_computed.md\":\"8fdd381a\",\"guide_component.md\":\"dc2b7861\",\"guide_concept.md\":\"37b6cd0e\",\"guide_libs.md\":\"2dc8d66d\",\"guide_event.md\":\"8013d678\",\"guide_intro.md\":\"e00af98a\",\"guide_jsx.md\":\"7183d635\",\"guide_lifecycle.md\":\"d6508116\",\"guide_quick-start.md\":\"98cb97a8\",\"guide_quick.md\":\"663d638a\",\"guide_logic.md\":\"94c25f2d\",\"guide_reactive.md\":\"26d1e52d\",\"guide_ts.md\":\"c3362560\",\"guide_style.md\":\"7b789253\",\"index.md\":\"569c7fc5\",\"guide_store.md\":\"309697fd\",\"guide_todo.md\":\"2ccacf7f\",\"guide_rule.md\":\"2f313a1c\",\"guide_render.md\":\"ca8e04f7\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Alins Docs(v0.0.36)\",\"description\":\"The most elegant and concise WebUI framework\",\"base\":\"/docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"https://shiyix.cn/images/alins.png\",\"siteTitle\":\"Alins\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/intro\"},{\"text\":\"Ecosystem\",\"link\":\"/ecosystem/plugin\"},{\"text\":\"Playground\",\"link\":\"https://alinsjs.github.io/playground\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"Guide\",\"items\":[{\"text\":\"Introduction\",\"link\":\"/guide/intro\"},{\"text\":\"Quick Start\",\"link\":\"/guide/quick-start\"},{\"text\":\"Concept\",\"link\":\"/guide/concept\"},{\"text\":\"Compare\",\"link\":\"/guide/compare\"}]},{\"text\":\"User Manual\",\"items\":[{\"text\":\"JSX Extension\",\"link\":\"/guide/jsx\"},{\"text\":\"Event\",\"link\":\"/guide/event\"},{\"text\":\"Class\",\"link\":\"/guide/class\"},{\"text\":\"Style\",\"link\":\"/guide/style\"},{\"text\":\"Life Cycle\",\"link\":\"/guide/lifecycle\"},{\"text\":\"Reactive Data\",\"link\":\"/guide/reactive\"},{\"text\":\"Computed Data\",\"link\":\"/guide/computed\"},{\"text\":\"Binding\",\"link\":\"/guide/binding\"},{\"text\":\"Component And Flow\",\"link\":\"/guide/component\"},{\"text\":\"Logic Block\",\"link\":\"/guide/logic\"},{\"text\":\"Compilation Rules\",\"link\":\"/guide/rule\"},{\"text\":\"Store\",\"link\":\"/guide/store\"},{\"text\":\"Custom Renderer\",\"link\":\"/guide/render\"}]},{\"text\":\"Appendix\",\"items\":[{\"text\":\"Query Manual\",\"link\":\"/guide/quick\"},{\"text\":\"Libs\",\"link\":\"/guide/libs\"},{\"text\":\"Typescript Case\",\"link\":\"/guide/ts\"},{\"text\":\"TODO-LIST Demo\",\"link\":\"/guide/todo\"}]}],\"/ecosystem/\":[{\"text\":\"Ecosystem\",\"items\":[{\"text\":\"Plugins\",\"link\":\"/ecosystem/plugin\"},{\"text\":\"Web Compiler\",\"link\":\"/ecosystem/web-compiler\"},{\"text\":\"Alins Standalone\",\"link\":\"/ecosystem/standalone\"},{\"text\":\"Alins Reactive\",\"link\":\"/ecosystem/reactive\"},{\"text\":\"Libs\",\"link\":\"/ecosystem/lib\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/alinsjs/alins\"}],\"footer\":{\"message\":\"Alins 2022-present\",\"copyright\":\"@github/alinsjs\"}},\"locales\":{\"root\":{\"label\":\"English\"},\"en\":{\"label\":\"简体中文\",\"link\":\"https://alinsjs.github.io/docs-cn\"}},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
    
  </body>
</html>